<template>
  <div id="downLoadJspdf" class="amortization-voucher-container">
    <header class="av-header">
      <a-row justify="end" class="av-date">
        <a-col v-if="isChangeDate" :span="4">
          <YearDate  @change="onDateChange" width="120"></YearDate>
        </a-col>
        <a-col v-else :span="4" class="a-row-item">
          {{ voucherDate }}
        </a-col>
      </a-row>
      <p class="av-title">{{ voucherName }}</p>
    </header>
    <section class="av-content">
      <a-row justify="space-between" class="av-cont-info a-row-item">
        <a-col :span="12">主体账簿：{{ principalBook }}</a-col>
        <a-col :span="12">
          <a-row justify="end">
            <a-col :span="4" class="av-num">第{{ voucherNumber }}号</a-col>
            <a-col :span="5" class="av-docAttached-number">附单据数：1张</a-col>
          </a-row>
        </a-col>
      </a-row>
      <div class="av-table">
        <CommonTable
          :tableData="tableData"
          :columnsData="columns"
          :isBodyCell="true"
          :isHeaderCell="true"
          :showPagination="false"
        >
          <template #template_summary="{ record }">
            <span>{{ record.template_summary }}</span>
          </template>
          <template #template_subject="{ record }">
            <span>{{ record.template_subject }}</span>
          </template>
          <template #debit_amount="{ record }">
            <span>{{ record.debit_amount }}</span>
          </template>
          <template #credit_amount="{ record }">
            <span>{{ record.credit_amount }}</span>
          </template>
        </CommonTable>
      </div>
    </section>
    <footer class="av-footer">
      <a-row align="middle" :gutter="16" class="a-row-item">
        <a-col :span="5">财务主管：</a-col>
        <a-col :span="5">记账：</a-col>
        <a-col :span="5">复核：</a-col>
        <a-col :span="5">出纳：</a-col>
        <a-col :span="4">经办人：</a-col>
      </a-row>
    </footer>
  </div>
  <div class="page-control">
    <a-button type="primary" size="large" :disabled="tableData?.length === 0" @click="downloadpdf"
      >下载</a-button
    >
  </div>
</template>

<script setup lang="ts">
import * as html2canvas from 'html2canvas';
import * as jspdf from 'jspdf';

const props = defineProps({
  //自定义时间
  isChangeDate:{
    type:Boolean,
    default:false
  },
  voucherName: String, // 凭证名称
  tableData: Array, // 凭证表内容
  voucherNumber: String, // 凭证编号
  principalBook: String, // 主体账薄
  voucherDate: String, // 日期
  columns: Array
  // dowloadPermission: Array,
});

const emits = defineEmits(['onDateChange'])


/**
 * @method onDateChange 凭证下载
 * @param date  当前选择组件的日期
 */
const  onDateChange = (date: string) => {
  emits('onDateChange', date);
};

/**
 * @method 凭证下载
 */
const downloadpdf = () => {
  let element = document.getElementById('downLoadJspdf') as any; // 页面用div包裹起来要导出的内容 id设为downLoadJspdf
  html2canvas
    .default(element, {
      logging: false //一开始canvas设置不渲染页面
    })
    .then((canvas: any) => {
      let pdf: any = new jspdf.default('p', 'mm', 'a4'); //纵向，单位mm，A4纸张大小
      let ctx: any = canvas.getContext('2d'); //预设2维画布
      let a4w: number = 190; //设置显示内容的大小，A4大小：210*297；最后显示在A4内部区域大小为：190*360
      let a4h: number = 360;
      let imgHeight: number = Math.floor((a4h * canvas.width) / a4w); //按A4显示比例换算一页图像的像素高度
      let renderedHeight: number = 0;
      while (renderedHeight < canvas.height) {
        //判断页面有内容时
        let page: any = document.createElement('canvas'); //创建画布
        page.width = canvas.width; //设置画布宽高等于内容宽高
        page.height = Math.min(imgHeight, canvas.height - renderedHeight); //画布的高等于内容的最小的高度（不足一页）
        //用getImageData裁剪指定区域，并绘制到前面创建的canvas对象中
        let a: any = page.getContext('2d');
        a.putImageData(
          ctx.getImageData(
            0,
            renderedHeight,
            canvas.width,
            Math.min(imgHeight, canvas.height - renderedHeight)
          ),
          0,
          0
        );
        pdf.addImage(
          page.toDataURL('image/jpeg', 1.0),
          'JPEG',
          10,
          10,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width)
        ); //添加图片到页面，保留10mm边距

        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage();
        }
      }
      pdf.save(`${props.voucherName}.pdf`);
    });
};
</script>

<style lang="less" scoped>
.amortization-voucher-container {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  border: 2px solid #ebf0fa;
  padding: 24px;
  border-radius: 8px;
  box-sizing: border-box;

  header {
    border-bottom: 1px solid #f0f5fe;
    margin-bottom: 16px;

    .av-date {
      text-align: right;
      font-size: 18px;
      font-weight: bold;
    }

    .av-title {
      text-align: center;
      font-weight: bold;
      letter-spacing: 4px;
      padding-bottom: 8px;
      font-family: Microsoft YaHei;
      font-size: 20px;
      font-weight: bold;
      color: #394d73;
    }
  }

  section {
    .av-cont-info {
      margin-bottom: 16px;

      .av-num,
      .av-docAttached-number {
        text-align: right;
      }
    }

    .av-table {
      margin-bottom: 24px;

      ::v-deep(.el-table) {
        border-radius: unset;
        --el-table-border-color: black;

        .el-table__inner-wrapper::before {
          height: 1px;
        }

        th {
          color: #000000; /* 你想要的颜色 */

          .cell {
            color: inherit;
            font-weight: bold;
            letter-spacing: 4px;
          }
        }
      }
    }

    .av-total {
      margin-bottom: 24px;

      p {
        font-size: 18px;
        font-weight: bold;
        text-align: right;
      }
    }
  }
}

.page-control {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #ebf0fa;
  margin-top: 16px;
  padding-top: 16px;
  margin-bottom: 24px;
}
.a-row-item {
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: normal;
  color: #394d73;
}
</style>
